﻿<script setup lang="ts" name="CountTo">
import { storeToRefs } from 'pinia'
import { useAppStoreWithOut } from '@/store/modules/app'

const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)

const countRef = ref(null)

const startVal = ref(0)

const endVal = ref(1314512)

const duration = ref(3000)

const decimals = ref(0)

const separator = ref(',')

const prefix = ref('¥ ')

const suffix = ref(' rmb')

const autoplay = ref(false)

const start = () => {
  unref(countRef)?.start()
}

const pauseResume = () => {
  unref(countRef)?.pauseResume()
}

const reset = () => {
  unref(countRef)?.reset()
}
</script>

<template>
  <PageWrap>
    <el-space :size="systemConfig.space" fill direction="vertical">
      <el-card shadow="never" class="anchor-wrap no-border no-radius">
        <el-form inline>
          <ElFormItem label="起始值" label-width="70px"><el-input-number v-model="startVal" :min="0" :max="1000" :step="100" style="width: 160px" /></ElFormItem>
          <ElFormItem label="最终值" label-width="70px"><el-input-number v-model="endVal" :min="1000" :max="9999999" :step="1000" style="width: 160px" /></ElFormItem>
          <ElFormItem label="持续时间" label-width="70px"><el-input-number v-model="duration" :min="1000" :max="10000" :step="1000" style="width: 160px" /></ElFormItem>
          <ElFormItem label="小数位数" label-width="70px"><el-input-number v-model="decimals" :min="0" :max="2" :step="1" style="width: 160px" /></ElFormItem>
          <ElFormItem label="分隔符" label-width="70px"><el-input v-model="separator" style="width: 160px" /></ElFormItem>
          <ElFormItem label="前缀" label-width="70px"><el-input v-model="prefix" style="width: 160px" /></ElFormItem>
          <ElFormItem label="后缀" label-width="70px"><el-input v-model="suffix" style="width: 160px" /></ElFormItem>
          <ElFormItem label="自动播放" label-width="70px">
            <ElSwitch v-model="autoplay" />
          </ElFormItem>
          <ElFormItem>
            <el-button type="primary" @click="start">动画开始</el-button>
            <el-button type="primary" @click="pauseResume">动画暂停</el-button>
            <el-button type="danger" @click="reset">重置动画</el-button>
            <span class="tips">自动播放开启后，会在起始值、最终值发生变化时，自动执行数字动画</span>
          </ElFormItem>
        </el-form>
        <div class="element-wrap">
          <CountTo :start-val="0" :end-val="10000" :duration="5000" :decimals="2" separator="," prefix="¥ " suffix=" RMB" :autoplay="true" class="text-30px font-bold text-[var(--el-color-primary)]" />
        </div>
        <div class="element-wrap">
          <CountTo ref="countRef" :start-val="startVal" :end-val="endVal" :duration="duration" :decimals="decimals" :separator="separator" :prefix="prefix" :suffix="suffix" :autoplay="autoplay" class="text-30px font-bold text-[var(--el-color-primary)]" />
        </div>
      </el-card>
    </el-space>
  </PageWrap>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-card {
  display: flex;

  :deep(.el-card__body) {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
}

.element-wrap {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  overflow: hidden;
  background-color: var(--el-color-primary-light-9);
}

.el-form {
  .el-form-group {
    float: left;

    .el-form-item {
      :deep(.el-form-item__content) {
        .el-textarea {
          .el-textarea__inner {
            height: 100%;
          }
        }
      }
    }

    .el-button {
      display: block;
      margin-top: 30px;
      margin-left: 6px;
    }

    .el-button+.el-button {
      margin-top: 6px;
    }
  }
}

.tips {
  margin-left: 10px;
  color: var(--el-text-color-disabled);
}
</style>
